<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>商品搜索win</title>
  	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html body{background: #fff !important}
        .aui-bar{padding:0.1rem 0.3rem;box-sizing:border-box;width: 100%;}
        .aui-searchbar{height: 1rem;}
        .aui-border-radius{height: 1rem;line-height: 1rem;margin: 0;border-radius:0.2rem;padding-left: 0.2rem;}
        .aui-searchbar-input input{height: 1rem;font-size:0.373rem;display: flex;align-items: center;}
        .aui-searchbar-cancel{height: 1rem;line-height: 1rem;font-size:0.373rem;width: 1.5rem;color: #fff;}
        .iconsousuo1{font-size: 0.48rem !important;line-height: 1rem !important;color:#ff4c41;display: block;padding-right: 0.2rem}
        .iconsousuo1:before {content: "\e602";}
        /*tab分类*/
        .aui-tab .aui-tab-item{height: 1.2rem;line-height: 1.2rem;font-size:0.426rem;color:#333;padding-top:0.1rem;}
        .aui-tab-item.aui-active{color: #ff4c41;border: none;font-weight: 700;}
        .aui-active::after{content: "";display: block;margin:-6px auto 0 auto;width:2rem;height: 2px;
          background: #ff4c41;box-sizing: border-box;}
    </style>
</head>
<body id="wrap">
    <header class="aui-bar aui-bar-nav aui-bar-light sg-color-font1 sg-color-bg2" id="aui-header">
        <div class="aui-searchbar sg-color-bg2" id="search">
            <div class="aui-searchbar-input aui-border-radius">
                <span class="iconfont iconsousuo1"></span>
                <form action="javascript:search();"  oninput="myFunction()">
                    <input type="search" placeholder="复制淘宝商品链接" id="search-input">
                </form>
            </div>
            <div class="aui-searchbar-cancel sg-text-size32" tapmod onclick="closeWinFun()">取消</div>
        </div>
    </header>
    <div class="contentArea">
        <div class="aui-tab sg-color-bg3" id="tab">
            <div class="aui-tab-item aui-active">淘宝天猫</div>
            <div class="aui-tab-item">拼多多</div>
            <div class="aui-tab-item">京东</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var tab = new auiTab({
     element:document.getElementById("tab"),
     index:1,
     repeatClick:false
 },function(ret){
     setFrameShow(ret.index - 1);
 });
 var indexType = 0;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    var header = $api.byId('aui-header');
		$api.fixStatusBar(header);
    // 打开当前对应frm组页面
    openFrameFun();
    // 使用模块弹出键盘

    setTimeout(function(){
      var softInput = api.require('softInputMgr');
      softInput.toggleKeyboard();
      // 将相应的输入框获取焦点
      document.getElementById("search-input").focus()
    }, 500);
}

// 执行搜索(给历史搜索增加数据)
function search(){
    if(document.getElementById("search-input").value != ''){
        api.sendEvent({
            name: 'historySearchData',
            extra: {
                key: document.getElementById("search-input").value
            }
        });
        api.openTabLayout({
            name: 'searchGoodsList',
            url: './searchGoodsList_win.html',
            useWKWebView: true,
            bgColor: '#fff',
            pageParam: {
                string: document.getElementById("search-input").value,
                platformType:indexType + 1
            }
        });
    }
}

// 打开当前对应frm组页面
function openFrameFun(){
    api.openFrameGroup({
    name: 'search',
    rect: {
        x: 0,
        y: $api.dom('#aui-header').offsetHeight + $api.dom('#tab').offsetHeight,
        w: 'auto',
        h:  $api.dom('#wrap').offsetHeight - $api.dom('#aui-header').offsetHeight - $api.dom('#tab').offsetHeight
    },
    index:0,
    frames: [{
        name: 'search1',
        url: 'search_frm.html',
        bgColor: '#fff',
        pageParam:{
            type:1,//淘宝天猫
        }
      },{
        name: 'search2',
        url: 'search_frm.html',
        bgColor: '#fff',
        pageParam:{
            type:2,//拼多多
        }
      },{
        name: 'search3',
        url: 'search_frm.html',
        bgColor: '#fff',
        pageParam:{
            type:3,//京东
        }
      }
    ]
  }, function(ret, err) {
      // 当前展示界面的index 用于切换选中按钮
      var index = ret.index;
      selectActiveFun(index);
  });
}
// 当前展示界面的index 用于切换选中按钮
function selectActiveFun(index){
    tab = new auiTab({
         element:document.getElementById("tab"),
         index:index+1,
         repeatClick:false
     },function(ret){
     });
}
// 设置展示frm页面
function setFrameShow(index){
    indexType = index;
    api.setFrameGroupIndex({
      name: 'search',
      index: index,
      scroll: true
    });
}
// 搜索模糊查询
function myFunction(){
    var keyValue = document.getElementById("search-input").value
    if(keyValue != ''){
        api.ajax({
            url:'https://suggest.taobao.com/sug?code=utf-8&q=' + keyValue,
            method: 'get',
        }, function (ret,err){
            if(ret){
                var kewWordsArr = []
                ret.result.forEach(item => {
                    kewWordsArr.push(item[0])
                })
                api.sendEvent({
                    name: 'kewWordsArrFun',
                    extra: {
                        key: kewWordsArr,
                    }
                });
            }
        })
    }
}
// 关闭当前页面
function closeWinFun(){
    api.closeWin({});
}
</script>
</html>
